<template>
  <!-- 个人分配 -->
  <section class="component distribution">
    <distribution-pattern
      class="pattern"
      @modeChange="refreshData"
      @debtChange="refreshData"
    ></distribution-pattern>
    <data-box
      :data="dataSet"
      ref="data-box"
    >
      <template slot="columns">
        <el-table-column
          prop="userName"
          label="用户名"
          :min-width="$helper.getColumnWidth(3)"
        ></el-table-column>
        <el-table-column
          prop="realName"
          label="催收员"
          :min-width="$helper.getColumnWidth(3)"
        ></el-table-column>
        <el-table-column
          prop="currentNum"
          label="当前持有案件数"
          :min-width="$helper.getColumnWidth(4)"
        ></el-table-column>
        <el-table-column
          prop="currentAmt"
          label="当前持有案件欠款总金额"
          :min-width="$helper.getColumnWidth(4)"
        ></el-table-column>
        <el-table-column
          label="确认分配案件数"
          :min-width="$helper.getColumnWidth(4)"
        >
          <template slot-scope="scope">
            <el-input
              :disabled="!isCustomerDistribution"
              type="number"
              :maxlength="2"
              v-model="scope.row.num"
              :min="0"
              :max="inputMax"
              @blur="onNumBlur"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="amt"
          label="分配案件欠款金额"
          v-if="again || !isCustomerDistribution"
          :min-width="$helper.getColumnWidth(3)"
        ></el-table-column>
        <el-table-column
          prop="sumNum"
          label="分配后案件总数量"
          v-if="!again"
          :min-width="$helper.getColumnWidth(4)"
          :formatter="computAllotCaseCount"
        ></el-table-column>
        <el-table-column
          prop="sumAmt"
          label="分配后案件总金额"
          v-if="!isCustomerDistribution && !again"
          :min-width="$helper.getColumnWidth(4)"
        ></el-table-column>
      </template>
    </data-box>
    <div class="operate-buttons">
      <el-button @click="emitBack">上一步</el-button>
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import { Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { Prop, Emit, Watch } from "vue-property-decorator";
import DistributionPattern from "~/components/distribution-common/distribution-pattern.vue";
import { namespace } from "vuex-class";
import { CASE_CHANNEL, DISTRIBUTION_TYPE } from "~/config/enum.config";
import { VisitCaseManageService } from "~/services/domain-service/visit-case-manage.service";
import { TelCaseManageService } from "~/services/domain-service/tel-case-manage.service";
import { LegalCaseManageService } from "~/services/domain-service/legal-case-manage.service";
import { CaseAssitVisitStayService } from "~/services/domain-service/case-assist-visit-stay.service";
import { CaseAssitCaseService } from "~/services/domain-service/case-assist-case.service";
import { CaseAssistAntiFraudCaseStayService } from "~/services/domain-service/case-assist-anti-fraud-case-stay.service";
import { CaseAssistService } from "~/services/domain-service/case-assist.service";

const AllotModule = namespace("case-allot");

@Component({
  components: {
    DistributionPattern
  }
})
export default class Distribution extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(VisitCaseManageService)
  private visitCaseManageService: VisitCaseManageService;
  @Dependencies(TelCaseManageService)
  private telCaseManageService: TelCaseManageService;
  @Dependencies(LegalCaseManageService)
  private legalCaseManageService: LegalCaseManageService;
  @Dependencies(CaseAssitVisitStayService)
  private caseAssitVisitStayService: CaseAssitVisitStayService;
  @Dependencies(CaseAssitCaseService)
  private caseAssitCaseService: CaseAssitCaseService;
  @Dependencies(CaseAssistAntiFraudCaseStayService)
  private caseAssistAntiFraudCaseStayService: CaseAssistAntiFraudCaseStayService;
  @Dependencies(CaseAssistService)
  private caseAssistService: CaseAssistService;
  // 模式
  @AllotModule.State private mode;
  @AllotModule.Getter private perviewModel;
  @AllotModule.Getter private distributeModel;

  /**
   * 数据业务来源
   */
  @Prop({ type: String, required: true })
  private fromChannel;

  /**
   * 重新分配
   */
  @Prop({ type: Boolean, default: false })
  private again;

  /**
   * table数据源
   */
  private dataSet: any[] = [];

  /**
   * 获取预览数据
   */
  public refreshData() {
    switch (this.fromChannel) {
      case CASE_CHANNEL.tel:
      case CASE_CHANNEL.assist_tel:
        this.telCaseManageService
          .reviewDistributeCase(this.perviewModel)
          .subscribe(this.updatePreViewData);
        break;
      case CASE_CHANNEL.legal:
      case CASE_CHANNEL.assist_legal:
        this.legalCaseManageService
          .reviewDistributeCase(this.perviewModel)
          .subscribe(this.updatePreViewData);
        break;
      case CASE_CHANNEL.visit:
      case CASE_CHANNEL.assist_visit:
        this.visitCaseManageService
          .reviewDistributeCase(this.perviewModel)
          .subscribe(this.updatePreViewData);
        break;
      case CASE_CHANNEL.law:
        this.caseAssitVisitStayService
          .synergisticDistribution(this.perviewModel)
          .subscribe(this.updatePreViewData);
        break;
      case CASE_CHANNEL.fraud:
        this.caseAssistAntiFraudCaseStayService
          .previewCaseAssist(this.perviewModel)
          .subscribe(this.updatePreViewData);
        break;
    }
  }

  @Emit("success")
  private emitSuccess() {
    this.dataSet = [];
    this.emitClose();
  }

  @Emit("back")
  private emitBack() {}

  @Emit("close")
  private emitClose() {}

  /**
   * 是否自定义分配
   */
  private get isCustomerDistribution() {
    return this.mode === "BY_CUSTOMIZE";
  }

  /**
   * 输入框最大值
   */
  private get inputMax() {
    return this.perviewModel.caseIds.length;
  }

  /**
   * 计算输入后当前行人员的案件总数
   */
  private computAllotCaseCount(row: any) {
    const inputNum = Number.parseInt(row.num || "0");
    return inputNum + row.currentNum;
  }

  /**
   * 输入验证
   */
  private onNumBlur(e) {
    if (e.target.valueAsNumber > this.inputMax) {
      this.$message.error(e.target.validationMessage);
    } else {
      const alreadySum = this.dataSet.reduce(
        (a, c) => a + Number.parseInt(c.num || "0"),
        0
      );
      if (alreadySum > this.inputMax) {
        this.$message.error("输入数量不能大于选中分案数量");
      }
    }
  }

  /**
   * 更新预览数据
   */
  private updatePreViewData(data: any) {
    this.dataSet = data.resDistModel;
    this.distributeModel.analyseId = data.analyseId;
  }

  /**
   * 确定分配
   */
  private submit() {
    this.distributeModel.distributeNumber = this.dataSet.map(v => v.num);
    let service: any = null;

    switch (this.fromChannel) {
      case CASE_CHANNEL.tel:
        service = this.telCaseManageService;
        break;
      case CASE_CHANNEL.legal:
        service = this.legalCaseManageService;
        break;
      case CASE_CHANNEL.visit:
        service = this.visitCaseManageService;
        break;
      case CASE_CHANNEL.assist_tel:
      case CASE_CHANNEL.assist_visit:
      case CASE_CHANNEL.assist_legal:
        service = this.caseAssistService;
        break;
      case CASE_CHANNEL.law:
        service = this.caseAssitVisitStayService;
        break;
      case CASE_CHANNEL.fraud:
        service = this.caseAssistAntiFraudCaseStayService;
        break;
    }
    if (!service) return;
    service
      .confirmDistributeCase(this.distributeModel)
      .subscribe(this.emitSuccess);
  }
}
</script>
<style lang="less" scoped>
.component.distribution {
  .pattern {
    margin: 0 0 10px 12px;
  }
}
</style>
